<template>
  <div>
    <!--筛选查询-->
    <div class="box">
      <div class="title">筛选查询</div>
      <div class="cont">
        <span style="margin-left: 30px; color: #666666; font-size: 16px">企业搜索：</span>

        <el-input v-model="query.name" style="width: 200px" placeholder="输入您要查找的企业"></el-input>

        <span style="margin-left: 60px; color: #666666; font-size: 16px">状态：</span>

        <el-select v-model="query.type" placeholder="请选择" style="width: 240px">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>

        <el-button @click="init()" style="margin-left: 30px; color: #666666; font-size: 14px">查询结果</el-button>
      </div>
    </div>
    <!--企业列表-->
    <div class="box">
      <div class="title" style="margin-top: 30px">
        <span>企业列表</span>
        <el-button @click="saveOrUpdate()" class="enterpriseBtn">添加用户</el-button>
        <el-button @click="exportEnterprise()" class="enterpriseBtn">导出</el-button>
      </div>

      <el-table :data="tableData" stripe border style="width: 100%; border: 1px solid #e0e0e0" :header-cell-style="{
          'text-align': 'center',
          'font-size': '16px',
          color: '#666666',
          borderColor: '#e0e0e0',
        }" :cell-style="{
          'text-align': 'center',
          'font-size': '14px',
          color: '#666666',
          borderColor: '#e0e0e0',
        }">
        <el-table-column type="selection" width="55" />
        <el-table-column prop="code" label="企业ID" width="95" />
        <el-table-column prop="name" label="企业客户" width="145" />
        <el-table-column prop="user" label="联系人" width="180" />
        <el-table-column prop="mobile" label="手机" width="180" />
        <el-table-column prop="createTime" label="创建时间" width="250" />
        <el-table-column prop="expireDate" label="到期时间" width="250" />
        <el-table-column label="操作">
          <template v-slot="{ row }">
            <span class="btn">进入</span>
            <span class="btn" @click="saveOrUpdate(row)">资料</span>
            <span class="btn" @click="updateAuth(row.id)">权限</span>
            <span class="btn" @click="queryAccount(row.id)">资金</span>
            <span class="btn" @click="updateXuFei(row.id)">续费</span>
            <span class="btn" @click="remove(row.id)">删除</span>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!--分页-->
    <div class="box" style="
        margin-top: 20px;
        border: 1px solid #e0e0e0;
        height: 50px;
        padding: 10px;
        box-sizing: border-box;
        padding-left: 1200px;
      ">
      <el-pagination :page-size="pageSize" :page-sizes="[10, 20, 30, 50, 100]"
        layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="chg" @current-change="chgpg" />
    </div>

    <!--新增企业组件-->
    <SaveOrUpdate ref="saveUpdateRef" :visible="isShow" @close="isShow = false" @reflush="init()"></SaveOrUpdate>

    <!--企业权限组件-->
    <auth ref="authRef" :dialogVisible="showAuth" @close="showAuth = false"></auth>

    <!--资金组件-->
    <accountDetail ref="accountRef" :dialogVisible="showAccount" @close="showAccount = false"></accountDetail>

    <!--续费组件-->
    <xuFei ref="xuFeiRef" :dialogVisible="showXuFei" @close="showXuFei = false" @reflush="init()"></xuFei>
  </div>
</template>

<script setup>
import xuFei from "./xuFei.vue";
import accountDetail from "./accountDetail.vue";
import auth from "./auth.vue";
import SaveOrUpdate from "./SaveOrUpdate.vue";
import { onMounted, ref } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import {
  queryEnterprise,
  exportExcel,
  deleteEnterprise,
} from "@/api/platform/enterprise.js";
import host from "@/utils/env.js";
defineOptions({
  // 作为一种规范最好必须写上并且和路由的name保持一致
  name: "enterprise",
});
//定义属性

//子组件引用
let saveUpdateRef = ref(null);
let authRef = ref(null);
let accountRef = ref(null);
let xuFeiRef = ref(null);
//是否显示子组件对话框
let isShow = ref(false); //新增对话框
let showAuth = ref(false); //权限对话框
let showAccount = ref(false); //资金对话框
let showXuFei = ref(false); //续费对话框

//企业列表
const tableData = ref([]);
//分页参数
const page = ref(1);
const pageSize = ref(10);
const total = ref(0);
//选择状态
const options = [
  {
    value: 0,
    label: "全部",
  },
  {
    value: 1,
    label: "未审核",
  },
  {
    value: 2,
    label: "已审核",
  },
];
//查询条件
const query = ref({
  name: "",
  type: "",
});

//方法区

//添加或修改
let saveOrUpdate = (row) => {
  isShow.value = true;
  saveUpdateRef.value.init(row);
};

//每页显示的个数  每页的记录数
let chg = (pgsize) => {
  pageSize.value = pgsize;
  page.value = 1;
  init();
};
//页数发生变化  第几页
let chgpg = (pg) => {
  page.value = pg;
  init();
};

//请求企业列表
let init = () => {
  let data = {
    page: page.value,
    pageSize: pageSize.value,
    name: query.value.name,
    status: query.value.type,
  };
  queryEnterprise(data).then((res) => {
    if (res.code == 200) {
      tableData.value = res.data.list;

      //更新分页参数
      page.value = res.data.page;
      pageSize.value = res.data.pageSize;
      total.value = res.data.total;
    }
  });
};

//导出企业
let exportEnterprise = async () => {
  let res = await exportExcel({});
  if (res.code == 200) {
    let url = host + res.data;
    window.open(url);
  }
};

//删除企业
//删除弹出框
let remove = (id) => {
  ElMessageBox.confirm("确认删除该企业吗?")
    .then(() => {
      deleteEnter(id);
    })
    .catch(() => {
      // catch error
    });
};
//删除请求
let deleteEnter = async (id) => {
  let res = await deleteEnterprise({ id });
  if (res.code == 200) {
    ElMessage({
      message: "删除成功",
      type: "success",
    });
    init();
  }
};

//修改权限
let updateAuth = (id) => {
  showAuth.value = true;
  authRef.value.init(id);
};

//查看资金
let queryAccount = (data) => {
  showAccount.value = true;
  accountRef.value.init(data);
};

//续费
let updateXuFei = (data) => {
  showXuFei.value = true;
  xuFeiRef.value.getId(data);
  xuFeiRef.value.init();
};

//生命周期函数
onMounted(() => {
  init();
});
</script>

<style scope>
* {
  padding: 0;
  margin: 0;
}

.box {
  margin-right: 200px;
}

.title {
  border: 1px solid #e0e0e0;
  border-bottom: none;
  background-color: #f3f3f3;
  height: 50px;
  line-height: 50px;
  font-size: 14px;
  padding-left: 15px;
  color: #666666;
}

.cont {
  border: 1px solid #e0e0e0;
  background-color: #fff;
  height: 60px;
  line-height: 60px;
}

.enterpriseBtn {
  float: right;
  margin-top: 10px;
  margin-right: 10px;
}

.btn {
  margin-left: 5px;
  font-size: 14px;
  color: #39f;
  cursor: pointer;
}

.btn:hover {
  text-decoration: underline;
}
</style>
